import { RotateCcw, Shield, Truck } from "lucide-react";

type TrustBadge = {
	icon: React.ComponentType<{ className?: string }>;
	title: string;
	description: string;
};

const defaultBadges: TrustBadge[] = [
	{ icon: Truck, title: "Free Shipping", description: "Orders over $500" },
	{ icon: Shield, title: "10-Year Warranty", description: "Full coverage" },
	{ icon: RotateCcw, title: "30-Day Returns", description: "Hassle-free" },
];

export function TrustBadges({ badges = defaultBadges }: { badges?: TrustBadge[] }) {
	return (
		<div className="grid grid-cols-3 gap-4 rounded-xl bg-secondary/50 p-4">
			{badges.map((badge) => (
				<div key={badge.title} className="flex flex-col items-center text-center">
					<badge.icon className="mb-2 h-5 w-5 text-muted-foreground" />
					<span className="text-xs font-medium">{badge.title}</span>
					<span className="text-[10px] text-muted-foreground">{badge.description}</span>
				</div>
			))}
		</div>
	);
}
